<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
		<script type="application/javascript" src="../../js/flexible.debug.js"></script>
		<script type="application/javascript" src="../../js/flexible_css.debug.js"></script>
		<link rel="stylesheet" href="../../css/layout.css">
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="midell mg-t20 backgroundcolorfff content displayFlex">
				<van-checkbox v-model="checked" checked-color="#f72929">
					<div class="mg-l20">
						<div class="displayFlex">
							<p class="left flex1 color333 font28"><em class="icon"><img src="../../img/logo.png" alt="logo" class="mg-r12"></em>一城一盒
								重庆特产</p>
							<p class="right"><img src="../../img/kuaidi.png" alt="快递" class="width114 height30"></p>
						</div>
						<div class="displayFlex mg-t32">
							<div class="width162 height162"><img src="../../img/logo.png" alt="" class="width100p height100p"></div>
							<div class="mg-l43">
								<p class="font26 color333 lineHeight40 letterSpacing1">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等。</p>
								<p class="mg-t30 displayFlex">
									<span class="colorf72929 font36 left flex1">¥{{price|formatFixed}}</span>
									<span class="right">
										<van-stepper v-model="orderNumber" @change="changeorder" /></span>
								</p>
							</div>
						</div>
					</div>
				</van-checkbox>
			</div>
			<div class="bottom height82 displayFlex lineheight82 width100">
				<p class="backgroundcolorfff flex2 displayFlex">
					<span class="color333 font26 flex1 mg-l24"><van-checkbox v-model="checked" class="lineheight82 mg-t25 font-28" checked-color="#f72929">全选</van-checkbox></span>
					<span class="font34 fontBold colorf72929 flex2 textRight mg-r30"><em>¥</em>{{total|formatFixed}}</span>
				</p>
				<p class="backgroundcolorf72929 flex1 font30 colorfff textCenter" @click="goPay(total)">立即结算</p>
			</div>
		</div>
		<script>
			var vant = window.vant;
			Vue.use(vant);
			new Vue({
				el: '#app',
				data: {
					orderNumber: 1,
					value: 1,
					price: 299,
					total: 299,
					checked: true,
					// checkedAll:false
				},
				created: function() {

				},
				methods: {
					goaddress: function() {
						window.location.href = "../address.html";
					},
					changeorder(value) {
						this.orderNumber = value;
						this.total = value * this.price;
					},
					goPay: function(val) {
						if(this.checked){
							window.location.href = "../pay.html?amount=" + val;
						}else{
							vant.Toast('你还没选择商品')
						}
					}
				},
				filters: {
					formatFixed: function(val) {
						return parseFloat(val).toFixed(2)
					}
				}
			})
		</script>
	</body>
</html>
